<template>
  <el-container>
    <el-main>
      <div class="block">
        <el-input placeholder="按用户名查询" v-model="logSearch.username" style="width: 150px" clearable/>
        <el-select v-model="logSearch.methodType" clearable placeholder="请求类型" style="width: 150px">
          <el-option v-for="item in method" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
        <el-date-picker v-model="logSearch.time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"/>
        <el-button type="primary" round @click="logSearchBtn">查询</el-button>
        <el-button type="warning" round @click="logSearchDeleteBtn" v-if="btnPermission.webLogDelete">清空业务日志</el-button>
      </div>
      <el-table :data="tableData" height="700" style="width: 98%">
        <el-table-column prop="username" label="用户名"/>
        <el-table-column prop="basePath" label="请求地址"/>
        <el-table-column prop="uri" label="请求接口"/>
        <el-table-column prop="ip" label="请求IP"/>
        <el-table-column prop="method" label="请求类型"/>
        <el-table-column prop="description" label="操作描述"/>
        <el-table-column prop="parameter" label="请求参数" :show-overflow-tooltip="true" />
        <el-table-column prop="results" label="返回结果" :show-overflow-tooltip="true"/>
        <el-table-column prop="startTime" label="请求时间" :formatter="startTime"/>
      </el-table>
      <el-pagination
        style="width: 90%;"
        :current-page="tablePage.currentPage"
        :page-sizes="[10, 20, 50, 100, 500]"
        :page-size="tablePage.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tablePage.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-main>
  </el-container>
</template>

<script>
import { webLogList, webLogDelete } from '@/api/logApi'
export default {
  name: "OperationLog",
  data() {
    return {
      method: [{
        value: 'POST',
        label: 'POST'
      },{
        value: 'GET',
        label: 'GET'
      },{
        value: 'DELETE',
        label: 'DELETE'
      }],
      logSearch: {
        username: '',
        methodType: '',
        time: []
      },
      tableData: [],
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      btnPermission: {
        webLogDelete: false
      }
    }
  },
  created() {
    this.webLogList()
  },
  methods: {
    async webLogList(){
      const { data } = await webLogList({
        username: this.logSearch.username,
        time: this.logSearch.time,
        methodType: this.logSearch.methodType,
        page: this.tablePage.currentPage,
        pageSize: this.tablePage.pageSize
      })
      this.tableData = data.data[0].records
      this.tablePage.total = data.data[0].total
      // 按钮权限设置
      const press = data.data[1]
      for (let s = 0; s < press.length; s++) {
        if (!this.btnPermission[press[s]]) {
          this.btnPermission[press[s]] = true
        }
      }
    },
    logSearchBtn() {
      this.webLogList()
    },
    logSearchDeleteBtn(){
      this.$confirm('此操作将永久删除全部业务记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        webLogDelete().then( res => {
          this.$message.success(res.data.msg)
          this.webLogList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange: function(pageSize) {
      // 每页条数切换
      this.tablePage.pageSize = pageSize
      this.handleCurrentChange(this.tablePage.currentPage)
    },
    handleCurrentChange: function(currentPage) {
      this.loading = true
      // 页码切换
      this.tablePage.currentPage = currentPage
      this.webLogList()
    },
    startTime(row){
      let date = new Date(parseInt(row.startTime));
      let Y = date.getFullYear() + '-'
      let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-'
      let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
      let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':'
      let m = date.getMinutes()  < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':'
      let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return Y + M + D + h + m + s
    }
  }
}
</script>
<style lang="scss">

</style>
